<!DOCTYPE html>
<html>
    <head>
        <include file="Public:head"/>
        <title>菜单按钮管理</title>
        <style>
            body{
                font-size:12px;
            }
            .div-content{
                border-left:3px solid #d9534f;
                padding-left:10px;
                margin-bottom:20px;
                padding-top:0;
            }
            .div-content::after,.div-content::before{
                content: '!';
                border-radius: 15px;
                background-color:#d9534f;
                position: relative;

                left:-19px;
                height:15px;
                width:15px;
                display:inline-block;
                text-align: center;
                color:#fff;
            }
            .div-content::after{
                bottom:0;
            }
            .div-content::before{
                top:0;
            }
            .div-content p{
                padding-left:20px;
            }
            .label-menu{
                font-weight:100;
                color:#333;
                font-size:12px;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <form class="form-inline" action="/index.php/Auth/AuthMenuButton">
                <div class="input-group">
                    <div class="input-group-addon">菜单类别</div>
                    <select id="category" name="category" class="form-control">
                        <volist name="menuCategoryList" id="vo">
                            <option value="{$vo.code}">{$vo.name}</option>
                        </volist>
                    </select>
                </div>
                <button class="btn btn-default"><i class="fa fa-search"></i>&nbsp;搜索</button>
            </form>
            <div class="div-content">
                <h3>{$menuCategory.name}</h3>
                <volist name="menuCategory.menus" key="k" id="menu">
                    <p class="menu {$menu.code}" menu-code="{$menu.code}">
                        <label>{$menu.name}</label>
                        &nbsp;
                        <input type="checkbox" menuCode="{$menu.code}" class="checkAll" id="checkAll{$k}"/><label style="color:#337ab7;" for="checkAll{$k}"> 全选</label>
                        &#12288;&#12288;
                        <volist name="buttonList" id="button">
                            <input type="checkbox" class="button" id="{$button.code}{$k}" value="{$button.code}" name="button" <?php if(in_array($button['code'], $menu['buttonCodes'])) echo "checked='checked'";?>/>
                            <label class="label-menu" for="{$button.code}{$k}">{$button.name}</label>&#12288;
                        </volist>
                    </p>
                </volist>
            </div>

            <div class="btnClear" style="clear: both;"></div><br/>
            <button id="btn-sure" class="btn btn-info">保存</button>
        </div>
    </body>
</html>
<script>
    $("#category").val("{$category_code|default=''}");

    $(function(){
        $(".menu").each(function(){
            var checkLen = $(this).find(".button:checked").length;
            var allLen = $(this).find(".button").length;
            if(allLen >0 && checkLen == allLen){
                $(this).find(".checkAll").prop('checked', true);
            }
        });
    });

    $("#btn-sure").click(function(){
        var param = new Object();
        param.menu_code = new Array();
        param.menu_button = new Array();
        $(".menu").each(function(){
            var menuCode = $(this).attr('menu-code');
            param.menu_code.push(menuCode);
            $(this).find(".button:checked").each(function(){
                var paramTemp = new Object();
                paramTemp.menu_code = menuCode;
                paramTemp.button_code = $(this).val();
                param.menu_button.push(paramTemp);
            });
        });

        $.ajax({
            url:"__URL__/ajax_save",
            type:"post",
            dataType:"json",
            data:param,
            success:function(data){
                if(data.code !=1){
                    alertMsg({"msg":data.msg, "type":0});
                }else{
                    alertMsg({"msg":data.msg});
                }
            }
        });
    });

    $(".checkAll").change(function(){
        var menuCode = $(this).attr('menuCode');
        if($(this).prop('checked')){
            $("."+menuCode).find(".button").prop('checked', true);
        }else{
            $("."+menuCode).find(".button").prop('checked', false);
        }
    });
</script>